<!-- 批量导入报备 -->
<template>
  <div class="upload-jss">
    <Breadcrumb>
      <BreadcrumbItem v-for="(name, i) in breadcrumb" :key="i">{{ name }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="wrap">
      <Form ref="formItem" :model="formItem" :rules="formRule" :label-width="120" label-position="left">
        <FormItem prop="date" label="下载模板：">
          <a :href="downLoadUrl" download="template.xlsx">
            <Button type="primary" icon="md-cloud-download">下载</Button>
          </a>
        </FormItem>
        <FormItem prop="companyId" label="全部商户：">
          <Select v-model="formItem.companyId" placeholder="全部商户" style="width:200px" filterable clearable>
            <Option v-for="item in companyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="date" label="时间节点：">
          <DatePicker type="date" @on-change="selectDate" placeholder="时间节点" style="width: 200px"></DatePicker>
        </FormItem>
        <FormItem prop="saveJs" label="批量导入报备：">
          <Input type="text" readonly v-model="saveJs" placeholder="报备文件" style="width: 300px;">
            <Upload
              action="/bomc/batch/batchReport"
              :headers="headers"
              :before-upload="beforeSaveJs"
              :on-success="saveJsSuccess"
              :data="formItem"
              slot="append"
              class="js-com"
            >
              <Button type="primary" class="upload-js">上传</Button>
            </Upload>
          </Input>
        </FormItem>
      </Form>
      <a v-show="uploadFailed" :href="downUrl" download="导入失败数据.xlsx">
        点击下载
        <Icon type="md-cloud-download" size="16"/>
      </a>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Api from '@/api'

const reportApi = Api.report
const companyApi = Api.Company

export default {
  name: 'wanhaoreport',
  data() {
    return {
      breadcrumb: ['报备管理', '批量导入报备'],
      saveJs: '',
      formItem: {
        reportDate: '',
        companyId: ''
      },
      formRule: {},
      headers: { 'qf-channel-bomc-token': sessionStorage.getItem('token') },
      downUrl: '',
      downLoadUrl: '',
      uploadFailed: false,
      companyList: []
    }
  },
  methods: {
    downloadTemplate() {
      const api = reportApi.downloadModelExcel
      axios({
        method: api.methods,
        url: api.url,
        responseType: api.responseType,
        headers: { 'qf-channel-bomc-token': sessionStorage.getItem('token'), 'Content-Type': 'application/json' }
      }).then(
        (res) => {
          const blob = new Blob([res.data], {
            type: 'application/vnd.ms-excel' // 将会被放入到blob中的数组内容的MIME类型
          })
          const objectUrl = URL.createObjectURL(blob)
          this.downLoadUrl = objectUrl
        }
      )
    },
    selectDate(date) {
      this.formItem.reportDate = date
    },
    beforeSaveJs(file) {
      let upload = true
      const isLt1M = file.size / 1024 / 1024
      if (isLt1M > 10) {
        this.$Message.error('上传文件大小不能超过10M')
        upload = false
      }
      return upload
    },
    saveJsSuccess(response, file, fileList) {
      if (response.responseCode !== '1') {
        this.$Message.error(response.responseMessage)
        const api = reportApi.downloadFailExcel
        axios({
          method: api.methods,
          url: api.url,
          responseType: api.responseType,
          headers: { 'qf-channel-bomc-token': sessionStorage.getItem('token'), 'Content-Type': 'application/json' }
        }).then(
          (res) => {
            const blob = new Blob([res.data], {
              type: 'application/vnd.ms-excel' // 将会被放入到blob中的数组内容的MIME类型
            })
            const objectUrl = URL.createObjectURL(blob)
            this.downUrl = objectUrl
          }
        )
        this.uploadFailed = true
      } else {
        this.$Message.success('上传成功')
        this.uploadFailed = false
      }
      this.saveJs = file.name
    },
    async getCompanyList() {
      const { responseCode, data } = await this.$request(companyApi.listOptionCompany)
      if (responseCode === '1') {
        this.companyList = data
      }
    }
  },
  mounted() {
    this.downloadTemplate()
    this.getCompanyList()
  },
}
</script>
<style lang="scss" scoped>
.upload-jss {
  .wrap {
    margin-top: 30px;
  }
  .upload-js {
    color: #fff;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
</style>
